<template>
    <div class="cart">
        <template v-if="store.cart.length !== 0">
            <van-swipe-cell v-for="prod in store.cart" :key="prod.id">
                <van-card :price="prod.price" :title="prod.title" :origin-price="prod.originPrice"
                    :desc="(prod.originPrice - prod.price) + '元券'" class="goods-card">
                    <template #thumb>
                        <van-checkbox v-model="prod.checked"></van-checkbox>
                        <div class="van-image" style="width: 80%; height: 100%;">
                            <img :src="prod.image" class="van-image__img" style="object-fit: cover;">
                        </div>
                    </template>

                    <!-- 添加步尽器使用，修改选购商品的数量 -->
                    <template #num>
                        <van-stepper theme="round" button-size="22" integer v-model="prod.amount" />
                    </template>
                </van-card>

                <template #right>
                    <van-button square text="删除" @click="store.removeFromCart(prod.id)" type="danger"
                        class="delete-button" />
                </template>
            </van-swipe-cell>

            <!-- 提交订单 -->
            <van-submit-bar :price="store.allTotalMoney" button-text="提交订单" @submit="handleSubmit">
                <van-checkbox :model-value="store.allChecked" @click="handleCheckAll">全选</van-checkbox>
                <template #tip>
                    远赴人间惊鸿宴，一睹人间盛世颜！
                </template>
            </van-submit-bar>

        </template>

        <!-- 空提示 -->
        <van-empty v-else image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="120"
            description="购物车为空，请选购商品!">
            <van-button round type="primary" class="bottom-button" @click="handleShopping">去购物</van-button>
        </van-empty>

    </div>
</template>

<script lang="ts" setup>
import useCartStore from '@/store/cart';
import { useRouter } from 'vue-router';
// import { ref } from 'vue';

const store = useCartStore()

const router = useRouter()

console.log('store:', store.cart);

// const all = ref()

// store.cart.forEach(item => {
//     // if (item.checked) {
//     //     all.value += item.price * (item.amount as number) * 100
//     // }
//     all.value += (item.checked ? item.price * 100 * (item.amount as number) : 0)
//     console.log(item);

// })
// console.log('合计:', all.value);




// 全选处理
const handleCheckAll = (checked: boolean) => {
    console.log('checked:', checked);
    store.modifyAllChecked(!store.allChecked)

}

// 提交
const handleSubmit = () => {
    router.push('/confirm')
}

// 购物
const handleShopping = () => {
    router.push('/home')
}
</script>


<style lang="less" scoped>
@white :#fff;

.goods-card {
    margin: 0;
    background-color: @white;
}

.delete-button {
    height: 100%;
}

.van-submit-bar {
    bottom: 50px;
}

// 深度选择器 :deep 为了修改子组件中的样式
:deep(.van-card__thumb) {
    display: flex;
}

.bottom-button {
    width: 160px;
    height: 40px;
}

:deep(.van-card__desc) {
    color: red;
    font-weight: bold;
    font-size: 14px;
}

:deep(.van-card__origin-price) {
    font-size: 14px;
}

:deep(.van-card__price) {
    color: red;
    font-size: 20px;
    font-weight: bold;
}

:deep(.van-card__price-integer) {
    font-size: 20px;
    font-weight: bold;
}

:deep(.van-stepper--round .van-stepper__plus) {
    background-color: orangered;
}

:deep(.van-stepper--round .van-stepper__minus) {
    background-color: orangered;
    color: white;
    border-color: orangered;
}

:deep(.van-checkbox__icon--checked .van-icon) {
    border-color: rgb(5, 196, 5);
    background-color: rgb(5, 196, 5);
}

:deep(.van-stepper--round .van-stepper__input) {
    color: red;
}
</style>
